<template>
  <el-menu
    :default-active="this.$route.path"
    class="el-menu-demo"
    mode="horizontal"
    @select="handleSelect"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b">
    <el-menu-item v-for="(item,i) in navList" :key="i" :index="item.name" >
      <i :class="item.navItemIcon"></i>
      {{ item.navItem }}
    </el-menu-item >
    <div class="right_part">
      <el-button v-show=" !isLogin () " type="primary" @click="registerVisible = true">注册</el-button>
      <el-button v-show="!isLogin () " type="primary" @click="loginVisible = true">登录</el-button>
      <!--      用于注册登录的弹窗-->
      <el-dialog title="登录" :visible.sync="loginVisible" :before-close="handleClose">
        <Login></Login>
      </el-dialog>
      <el-dialog title="注册" :visible.sync="registerVisible" :before-close="handleClose">
        <Register></Register>
      </el-dialog>
      <!--      用于用户选项的下拉列表-->
    </div>
  </el-menu>
</template>

<script>
import Login from './Register-Login/Login'
import Register from './Register-Login/Register'
export default {
  name: 'NavBar',
  components: {
    Login,
    Register
  },
  watch: {
    LoginCondition: 'isLogin'

  },
  data () {
    return {
      navList: [
        {
          name: '/Home',
          navItem: '主页',
          navItemIcon: 'el-icon-s-home'
        },
        {
          name: '/Find',
          navItem: '发现',
          navItemIcon: 'el-icon-trophy'

        },
        {
          name: '/Create',
          navItem: '创建',
          navItemIcon: 'el-icon-s-promotion'
        },
        {
          name: '/Me',
          navItem: '我的',
          navItemIcon: 'el-icon-s-flag'
        }
      ],
      LoginCondition: false, // use this to judge whether it have been login
      registerVisible: false,
      loginVisible: false
    }
  },
  methods: {
    handleSelect (key) {
      this.$router.push(key)
    },
    isLogin () {
      let tem = !!localStorage.getItem('isLogin')
      console.log('aaa')
      if (tem === true) {
        console.log('aaa')
        this.LoginCondition = true
        return true
      } else {
        this.LoginCondition = false
        return false
      }
    },
    handleClose () {
      this.registerVisible = false
      this.loginVisible = false
    }
  }
}
</script>

<style scoped>
  .right_part{
    margin: 10px;
    float:right
  }
</style>
